<template>
	<header>
		<div class="item">
			<router-link to='/mine'>
				<div class="mine"></div>
			</router-link>
		</div>
		<div class="item">
			<router-link to='/selected'>
				精选
			</router-link>

		</div>

		<div class="item">
			<router-link to='/classification'>
				分类
			</router-link>

		</div>
		<div class="item">
			<router-link to='/radios'>
				电台
			</router-link>

		</div>
		<div class="item">
			<div class="search" @click="change"></div>
		</div>
	</header>

</template>

<script>
	export default {
		methods: {
			change(){
				this.$store.commit('changeStates');
			}
		}
	}
	
</script>

<style type="text/css" scoped>
	a{
		color: #7b7b83;
	}
	header {
		width: 100%;
		height: 1.304347rem;
		position: absolute;
		color: #7c7c86;
		line-height: 1.304347rem;
		text-align: center;
		top: 0;
		display: flex;
		font-size: 0.456521rem;
		background-color: #fbfbfb;
	}
	
	.item {
		flex-grow: 1;
	}
	
	.mine {
		width: 100%;
		height: 100%;
		background: url(../../img/title_my.png) center center no-repeat;
		background-size: 50%;
	}
	
	.search {
		width: 100%;
		height: 100%;
		background: url(../../img/title_sosuo.png) center center no-repeat;
		background-size: 50%;
	}
	.router-link-active{
		color: #e81f41;
	}
</style>